<!--
 * @Author: wfl
 * @LastEditors: ww
 * @description: 全局搜索表单
 * @updateInfo:
 * @Date: 2022-11-01 15:00:54
 * @LastEditTime: 2023-06-06 11:28:40
-->
<script lang="ts" setup name="IkContent">
import { useCssVar } from '@vueuse/core'
import type { PropType, Ref } from 'vue'
import useSettingsStore from '@g/store/modules/settings'

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 表格数据
  data: {
    type: Array,
    default: () => []
  },
  // 是否显示列号
  showIndex: {
    type: Boolean,
    default: true
  },
  // 边框
  border: {
    type: Boolean,
    default: true
  },
  // 是否显示顶部间距
  mrTop: {
    type: Boolean,
    default: true
  },
  noPadding: {
    type: Boolean,
    default: false
  },
  // el-card shadow
  shadow: {
    type: String as PropType<'always' | 'never' | 'hover'>,
    default: 'never'
  },
  // 是否使用默认分页
  showPage: {
    type: Boolean,
    default: true
  },
  pageSizes: {
    type: Array as PropType<Array<number>>,
    default: () => [10, 20, 30, 60, 90, 120]
  },
  // 分页配置
  page: {
    type: Object as PropType<{
      // 总条数
      total: number
      // 当前页
      page: number
    }>,
    default: () => {
      return {
        total: 0,
        page: 1
      }
    }
  }
})

const emits = defineEmits<{
  (event: 'size-change', size: Number): void
  (event: 'current-change', page: Number): void
}>()
const { slots } = getCurrentInstance()!
// const { t } = useConfig()

/**
 * @description: 高度计算
 * @return {*}
 */
const settingStore = useSettingsStore()
const el = ref(null)
const autoHeightVar = useCssVar('--auto-height', el)
const fixHeight = computed(() => {
  return slots.tabs ? 37 : 0
})
watch(
  () => settingStore.settings.app.elementSize,
  newVal => {
    // 根据Element组件尺寸自动计算autoHeight变量
    const _h = newVal === 'default' ? 100 : newVal === 'large' ? 110 : 90
    nextTick(() => {
      autoHeightVar.value = `${_h + fixHeight.value}px`
    })
  },
  {
    immediate: true
  }
)

/**
 * @description: 分页
 * @return {*}
 */
const pageSize: Ref<number> = ref(props.pageSizes[0])
const tableData = computed(() => {
  const { showIndex, data, page } = props
  if (!showIndex) {
    return data
  }
  else {
    return data.map((d: any, index) => {
      return {
        ...d,
        __index: (page.page - 1) * pageSize.value + index + 1
      }
    })
  }
})
const handleSizeChange = (size: Number) => {
  emits('size-change', size)
}
const handleCurrentChange = (page: Number) => {
  emits('current-change', page)
}

const isDark = computed(() => settingStore.settings.app.colorScheme === 'dark')
</script>

<template>
  <el-card
    ref="el"
    class="gl-content-card"
    :class="[
      !Object.keys($slots).length || noPadding ? 'noBody' : null,
      mrTop ? `mt-[0px]` : null,
    ]"
    :shadow="shadow"
  >
    <template #header>
      <div class="flex items-center justify-between">
        <!-- 左上角标题 -->
        <h2>
          {{ title }}
          <!-- 添加左侧部分 -->
          <div v-if="$slots.left">
            <slot name="left"></slot>
          </div>
        </h2>
        <div class="gl-content-btn">
          <!-- 插槽 右上角内容 一般为操作按钮 -->
          <slot name="right"></slot>
        </div>
      </div>
    </template>
    <template #default>
      <template v-if="$slots.tabs">
        <slot name="tabs">
        </slot>
      </template>
      <template v-if="$slots.tabsTable">
        <el-table
          v-loading="loading"
          :attrs="$attrs"
          :tooltip-effect="isDark ? 'dark' : 'light'"
          :data="tableData"
          :border="border"
          highlight-current-row
          style="width: 100%;"
          height="100%"
        >
          <!-- 自动生成序号列 -->
          <el-table-column
            v-if="showIndex"
            prop="__index"
            align="center"
            label="序号"
            width="80px"
          />
          <!-- 插槽 表格内容 (el-table-column) -->
          <slot name="tabsTable"></slot>
        </el-table>
        <el-pagination
          v-model:page-size="pageSize"
          class="float-right"
          :current-page="page.page"
          :page-sizes="pageSizes"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(page.total)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
      <template v-if="!$slots.tabs && !$slots.tabsTable">
        <el-table
          v-loading="loading"
          v-bind="$attrs"
          :tooltip-effect="isDark ? 'dark' : 'light'"
          :data="tableData"
          :border="border"
          highlight-current-row
          style="width: 100%;"
          height="100%"
        >
          <!-- 自动生成序号列 -->
          <el-table-column
            v-if="showIndex"
            prop="__index"
            align="center"
            label="序号"
            width="55px"
          />
          <!-- 插槽 表格内容 (el-table-column) -->
          <slot></slot>
        </el-table>
        <el-pagination
          v-model:page-size="pageSize"
          v-model:current-page="page.page"
          :page-sizes="pageSizes"
          :total="Number(page.total)"
          class="float-right"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @update:page-size="handleSizeChange"
          @update:current-page="handleCurrentChange"
        />
      </template>
    </template>
  </el-card>
</template>

<style lang="scss" scoped>
.gl-content-card {
  --auto-height: 108px;

  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  border: none;
  height: 100%;

  &.el-card {
    :deep(.el-card__body) {
      padding-top: 0;
      height: calc(100% - var(--auto-height));
    }

    .el-pagination {
      margin-top: var(--base-m);
    }
  }

  :deep(.el-card__header) {
    border-bottom: none;

    h2 {
      font-weight: 600;
    }
  }

  &.noBody {
    :deep(.el-card__body) {
      padding: 0;
    }
  }

  :deep(.el-tabs__header) {
    margin: 0;
  }
}
</style>
